<!--
 * Copyright (c) 2009 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
	<head>
		<title> Screen Capture Options </title>
		<meta charset="utf-8">
		<style>
			body {
				margin:10px;
				background-color: white;
				font: 11px arial, sans-serif;    
			}
			div#portlet-header {
				background: #92D8E2 url('images/header-background.png') no-repeat center center;
				width: 100%;
				height: 120px;
				float: left;
			}  
			div#header-logo {
				background: url('images/header-logo.png') no-repeat left top;
				width: 300px;
				height: 100%;
				margin-top: 17px;
				float: left;
			}
			div#bg {
				width: 1000px;
				margin: 0 auto;
				background: white url('images/portal_bg2.png');
			}
			div#portal {
				width: 986px;
				margin: 0 auto;
				vertical-align: top;
				display: block;
				text-align: left;
			}  
			th.visibility {
				width: 30px;
				text-align: center;
			}  
			th {
				font: 11px arial, sans-serif;    
				font-weight: bold;
			}  
			h4 {
				padding-left: 0.5em;
				border-bottom: 2px dotted #C3C3C3;
				color: #333;
				line-height: 28px;
				font-size: 15px;
			}
	</style>
	<script src="jquery-1.6.2.min.js"></script>
	<script src="jquery.json-2.2.min.js"></script>
	<script src="options.js"></script>
</head>
<body marginheight="0" topmargin="0" >
	<div id="bg">
		<div id="portal">
			<div id="portlet-header">
				<div id="header-logo"></div>
			</div>
			<div>
				<h4>Show/Hide Servers</h4>
				<div style="margin: 2px 0px 0px 56px">Default: 
					<input type="radio" name="showServers" value="show" id="settingServersShow"/><label for="settingServersShow">Show</label>
					<input type="radio" name="showServers" value="hide" id="settingServersHide"/><label for="settingServersHide">Hide</label>
				</div>
				<div style="margin: 2px 0px 0px 56px; font-weight:bold;">
					<table>
						<tr>
							<th class="visibility">Def.</th>
							<th class="visibility">Show</th>
							<th class="visibility">Hide</th>
							<th >Name</th>
							<th width="20"></th>
							<th class="visibility">Def.</th>
							<th class="visibility">Show</th>
							<th class="visibility">Hide</th>
							<th >Name</th>
							<th width="20"></th>
							<th class="visibility">Def.</th>
							<th class="visibility">Show</th>
							<th class="visibility">Hide</th>
							<th >Name</th>
							<th width="20"></th>
							<th class="visibility">Def.</th>
							<th class="visibility">Show</th>
							<th class="visibility">Hide</th>
							<th >Name</th>
						</tr>
						<tbody id="serverList">
						</tbody>
					</table>
				</div>
			</div>
			<div>
				<h4>Extra Servers (allways shown)</h4>
				<div style="margin: 2px 0px 0px 56px; font-weight:bold;">
					<table>
						<tr>
							<th>Name</th>
							<th>BaseUrl</th>
						</tr>
						<tr>
							<th><input id="extraName" style="width:80px" value="myServer"></th>
							<th><input id="extraBase" style="width:500px" value="http://developer.navngo.local:8080/"></th>
							<th><button id="extraAdd">Add</button></th>
						</tr>
						<tbody id="extraServerList">
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
